<script setup>
import { listUser } from '@/api/system/user.js'
const list = ref([])
const loading = ref(false)
const options = ref([])

const value = ref()
// 获取用户列表
const getList = async () => {
  try {
    const res = await listUser()
    list.value = res.data.map(item => {
      return { value: `value:${item.userId}`, label: `${item.userName} - 手机号` }
    })
  } finally {
  }
}

const remoteMethod = query => {
  if (query) {
    loading.value = true
    setTimeout(() => {
      loading.value = false
      options.value = list.value.filter(item => {
        return item.label.toLowerCase().includes(query.toLowerCase())
      })
    }, 200)
  } else {
    options.value = []
  }
}
getList()
</script>

<template>
  <el-select
    v-model="value"
    multiple
    filterable
    remote
    reserve-keyword
    placeholder="请输入姓名"
    :remote-method="remoteMethod"
    :loading="loading"
  >
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>
